<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/fullcalendar.css">
<link rel="stylesheet" href="../../Content/css/fullcalendar.print.css" media='print'>
<link rel="stylesheet" href="../../Content/css/base.css"/>
<style>
	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}
</style>
</head>

<body>

<div class="container-fluid">
	<div id="calendar"></div>
</div>
 
<script src="../../Scripts/moment.min.js"></script>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/fullcalendar.js"></script>
<script src="../../Scripts/all.js"></script>
<script src="../../Scripts/bootbox.min.js"></script>
<script>
	$(function(){
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		var calendar =$('#calendar').fullCalendar({
			isCheckbox:true,
			minTime: '08:00:00',
			maxTime: '24:00:00',
			lang:'zh-cn',
			

			//设置头部
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			events: [{
					title: 'All Day Event',
					start: new Date(y, m, 1),
					className: 'label-important'
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					className: 'label-success'
				},
				{
					title: 'Some Event',
					start: new Date(y, m, d-3),
					
			}],
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
			
				bootbox.prompt("添加新事件:", function(title) {
					if (title !== null) {
						calendar.fullCalendar('renderEvent',
							{
								title: title,
								start: start,
								end: end,
								allDay: allDay
							},
							true // make the event "stick"
						);
					}
				});
				calendar.fullCalendar('unselect');
				
			},
			eventClick: function(calEvent, jsEvent, view) {
				var d=jsEvent.target.tagName;
				if(d=="INPUT"){
					if(jsEvent.target.checked){
						$(jsEvent.target).parent('.fc-content').css({'text-decoration':'line-through'})
					}else{
						$(jsEvent.target).parent('.fc-content').css({'text-decoration':'none'})
					}
				}else{
					var form = $("<form class='form-inline'><label>修改事件名字 &nbsp;</label></form>");
					form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
					form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> 保存</button>");
					
					var div = bootbox.dialog({
						message: form,
					
						buttons: {
							"delete" : {
								"label" : "<i class='icon-trash'></i> 删除事件",
								"className" : "btn-sm btn-danger",
								"callback": function() {
									calendar.fullCalendar('removeEvents' , function(ev){
										return (ev._id == calEvent._id);
									})
								}
							} ,
							"close" : {
								"label" : "<i class='icon-remove'></i> 关闭",
								"className" : "btn-sm"
							} 
						}
		
					});
					
					form.on('submit', function(){
						calEvent.title = form.find("input[type=text]").val();
						calendar.fullCalendar('updateEvent', calEvent);
						div.modal("hide");
						return false;
					});
				}
				
				
			}
		});
		
	})
</script>

</body>
</html>
